<script setup lang="ts">
import { ref, watch } from "vue"
import * as echarts from "echarts"
import "echarts/renderers"
import { getStatisticsInventoryApi } from "@/api/billv2"

const chartRef = ref<any>(null)
// const chartRef2 = ref<any>(null)
const listData = ref<any[]>([])
const listData2 = ref<any[]>([])
const sum = ref<string>("0")
const total = ref<number>(0)

const getTable = () => {
  getStatisticsInventoryApi({}).then((res: any) => {
    listData.value = res.data.type
    listData2.value = res.data.count
    sum.value = res.data.typeNum
    total.value = res.data.countNum
  })
}
getTable()
const echartsInit = () => {
  if (chartRef.value) {
    console.log(listData)
    const chartInstance = echarts.init(chartRef.value)
    const option = {
      title: { text: "" },
      tooltip: { trigger: "item" },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: "50%",
          data: listData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }
    chartInstance.setOption(option)
    // 处理点击事件并且跳转到相应的百度搜索页面
    chartInstance.on("click", function (params) {
      console.log("click")
      console.log(params)
      // window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name))
    })
  }
  // if (chartRef2.value) {
  //   console.log(listData2)
  //   const chartInstance2 = echarts.init(chartRef2.value)
  //   const option2 = {
  //     title: { text: "" },
  //     tooltip: { trigger: "item" },
  //     legend: {
  //       orient: "vertical",
  //       left: "left"
  //     },
  //     series: [
  //       {
  //         name: "客户",
  //         type: "pie",
  //         radius: "50%",
  //         data: listData2.value,
  //         emphasis: {
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: "rgba(0, 0, 0, 0.5)"
  //           }
  //         }
  //       }
  //     ]
  //   }
  //   chartInstance2.setOption(option2)
  //   // 处理点击事件并且跳转到相应的百度搜索页面
  //   chartInstance2.on("click", function (params) {
  //     console.log("click")
  //     console.log(params)
  //     // window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name))
  //   })
  // }
}
watch(listData, echartsInit, { immediate: true })
</script>

<template>
  <div>
    <div>总金额：{{ sum }}</div>
    <div ref="chartRef" style="height: 400px" />
    <!-- <div>总数：{{ total }}</div>
    <div ref="chartRef2" style="height: 400px" /> -->
  </div>
</template>

<style scoped lang="scss"></style>
